.fetch-data-config {
  background-color: #fff;
  display: flex;
  height: calc(100vh - 165px);

  .left {
    width: 210px;
    box-shadow: 1px 0px 0px 0px #E8EBF2;
    display: flex;
    flex-direction: column;
    position: relative;

    .shrink {
      position: absolute;
      right: -12px;
      top: 48px;
      z-index: 100;
      width: 24px;
      height: 24px;
      background: #f6f8fc;
      padding: 7px;
      box-sizing: border-box;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0px 0px 17px #eeeeee;
    }

    .shrinkRight {
      transform: rotate(180deg);
    }

    .tab-menu {
      height: 60px;
      line-height: 60px;
      box-shadow: 0px 1px 0px 0px #E8EBF2;
      padding-left: 16px;

      .el-dropdown {
        margin-top: 18px;
      }

      .menu-list {
        font-size: 16px;
        color: #33353B;
        font-weight: 600;
      }
    }

    .index-list {
      flex-grow: 1;
      display: flex;
      position: relative;
      flex-direction: column;
      overflow: hidden;
    }

    .select-index {
      flex: 0 0 50%;
      overflow-y: auto;
      position: relative;
      // padding-left: 18px;
    }

    .line {
      position: relative;

      .drag-svg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        cursor: pointer;
        margin-top: -8px;
        z-index: 100;
        width: 16px;
        height: 16px;
        display: none;
      }

      .el-divider {
        margin-top: 3px;
        margin-bottom: 3px;
      }

      &:hover,
      &:active {
        .drag-svg {
          display: block;
        }
      }
    }

    .select-dimension {
      flex: 0 0 50%;
      // padding-left: 18px;
      overflow-y: auto;
      position: relative;
    }
  }

  .right {
    flex: 1;
    padding: 18px;
    overflow-y: auto;

    .right-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;

      .title {
        font-size: 20px;
        color: #33353B;
        font-weight: 600;
      }
    }

    .dragList {
      min-height: 150px;
      min-width: 900px;
      background: #eff1f7;
      border-radius: 5px;
      border: 1px solid transparent;
      position: relative;
      padding: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      position: relative;

      &:hover {
        border-color: #3c6eff;
      }
    }

    .right-middle {
      margin-top: 18px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .max-querynum-label {
        font-size: 14px;
        color: #33353b;
        line-height: 24px;
        font-weight: 600;
      }

      .max-querynum-input {
        margin-left: 10px;
        width: 120px;
      }

      .el-input-number.is-controls-right[class*=large] [class*=increase],
      .el-input-number.is-controls-right[class*=large] [class*=decrease] {
        --el-input-number-controls-height: 16px;
        width: 18px;
        background: #ffffff;
      }

      .el-input-number.is-controls-right .el-input-number__increase {
        top: 2px;
      }

      .el-input-number.is-controls-right .el-input-number__decrease {
        top: 18px;
      }

      .preview-btn {
        margin-left: 10px;
        border-color: #3C6EFF;
        color: #3C6EFF;
      }
    }

    .mid-divider::before{
      content: '';
      position: absolute;
      display: inline-block;
      width: 20px;
      left: -20px;
      top: -1px;
      border-top: 1px solid #dcdfe6;
    }
    .mid-divider::after{
      content: '';
      position: absolute;
      display: inline-block;
      width: 20px;
      right: -20px;
      top: -1px;
      border-top: 1px solid #dcdfe6;
    }

    .el-divider--horizontal {
      margin: 18px 0;
    }

  }
}